<template>
  <div class="home">
    <div class="body">
      <div class="title">校称</div>
      <div class="cont">
        <div class="line">
          <div class="row">
            <div class="tit">物料种类：</div>
            <el-select v-model="type" placeholder="请选择" @change="changeType()">
              <el-option
                v-for="item in typeList"
                :key="item.FlnkID"
                :label="item.MaterielTypeName"
                :value="item.MaterielTypeCode"
              ></el-option>
            </el-select>
          </div>
          <div class="row">
            <div class="tit">物料：</div>
            <el-select
                v-model="materiel"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="materielFilter"
                :loading="loading"
                style="width:240px"
                @change="changeMateriel"
            >
                <el-option
                v-for="item in materielFilterList"
                :key="item.FlnkID"
                :label="item.MaterielsDetailCode + '/' + item.MaterielName + '/' + item.ColorConfigName + '/' + item.SpecConfigName"
                :value="item.FlnkID"
                ></el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <div class="row">
            <div class="tit">物料名称：</div>
            <div class="des">{{materielInfo && materielInfo.MaterielName ? materielInfo.MaterielName : '--'}}</div>
          </div>
          <div class="row">
            <div class="tit">型号：</div>
            <div class="des">{{materielInfo && materielInfo.ColorConfigName ? materielInfo.ColorConfigName : '--'}}</div>
          </div>
        </div>
        <div class="line">
          <div class="row">
            <div class="tit">规格：</div>
            <div class="des">{{materielInfo && materielInfo.SpecConfigName ? materielInfo.SpecConfigName : '--'}}</div>
          </div>
          <div class="row">
            <div class="tit">历史单重：</div>
            <div class="des">{{materielInfo && materielInfo.UnitWeight ? materielInfo.UnitWeight : '0'}}g</div>
          </div>
        </div>
        <div class="main">
          <div class="line">
          <div class="row">
            <div class="tit">数量：</div>
            <div class="des">
              <el-input
                v-model="number"
                ref="numberInput"
                placeholder="请输入数量"
                style="width:200px"
                @keyup.enter.native="numberEnter()"
              ></el-input>
            </div>
          </div>
          <div class="row">
            <div class="tit">重量：</div>
            <div class="des">
              <el-input
                v-model="weight"
                ref="weightInput"
                placeholder="请输入重量"
                style="width:200px"
              ></el-input>
              <div class="unit">g</div>
            </div>
          </div>
        </div>
          <div class="weight">单重：{{unitWeight}}g</div>
          <div class="but">
            <el-button type="primary" style="width:200px;height:54px;font-size:28px" @click="updata()">更新</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {GetMaterielTypeList} from '@/api/search'
import {GetMaterielWeighing, GetMaterielsDetailByFilter, SaveMaterielWeighing} from '@/api/tool'
export default {
  name: 'demo',
  data () {
    return {
      materiel: '',
      materielList: [],
      type: '',
      materielFilterList: [],
      loading: false,
      keyWord: '',
      typeList: [],
      materielInfo: {},
      number: '',
      weight: ''
    }
  },
  computed: {
    unitWeight () {
      if (this.weight && this.number) {
        return this.weight / this.number
      }
    }
  },
  components: {},
  methods: {
    getTypeList () {
      let vm = this
      GetMaterielTypeList().then((response) => {
        if (response.data.data) {
          vm.typeList = response.data.data
        }
      })
    },
    materielFilter (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.materielFilterList = this.materielList.filter((item) => {
            return (
              item.MaterielsDetailCode.indexOf(query) > -1 || item.MaterielName.indexOf(query) > -1 || item.ColorConfigName.indexOf(query) > -1 || item.SpecConfigName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.materielFilterList = this.materielList
      }
    },
    changeType () {
      let vm = this
      let params = new FormData()
      params.append('Type', vm.type)
      params.append('SearchValue', vm.keyWord)
      GetMaterielsDetailByFilter(params).then((response) => {
        if (response.data) {
          vm.materielList = response.data
          vm.materielFilterList = response.data
        }
      })
    },
    getInfo () {
      let vm = this
      let params = {
        MSDetailFlnkID: vm.materiel,
        OperFlnkID: vm.getLocalStorage('UserFlnkID')
      }
      GetMaterielWeighing(params).then((response) => {
        if (response.data.result) {
          vm.materielInfo = response.data.data
        } else {
          vm.$message('暂无数据')
          vm.materielInfo = {}
        }
      })
    },
    changeMateriel () {
      this.getInfo()
    },
    numberEnter () {
      this.$refs.weightInput.focus()
    },
    updata () {
      let vm = this
      if (vm.materiel === '') {
        vm.$message('请选择物料种类')
        return
      }
      if (vm.materielInfo === '') {
        vm.$message('请选择物料')
        return
      }
      let params = {
        MSDetailFlnkID: vm.materiel,
        StockUnitFlnkID: vm.materielInfo.StockUnitFlnkID,
        UnitWeight: vm.unitWeight,
        OrgID: vm.getLocalStorage('OrgID'),
        OperFlnkID: vm.getLocalStorage('UserFlnkID')
      }
      SaveMaterielWeighing(params).then((response) => {
        if (response.data.result) {
          vm.$message('更新成功')
          this.getInfo()
        }
      })
    }
  },
  watch: {},
  mounted () {
    this.getTypeList()
    if (this.$route.query.type && this.$route.query.materiel) {
      this.type = this.$route.query.type
      this.changeType()
      this.materiel = this.$route.query.materiel
      this.getInfo()
    }
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/tool/validity.scss";
</style>
